대구 AI스쿨 #41_트위치 페이지 실습(4) 트위치 페이지의 메인영역, 공간을 차지하는 콘텐츠 오브젝트들의 대략적인 설계도면 그리고 디자인/ 배치작업을 끝내고 세부적인 부분에 디자인작업을 해주었다. 오브젝트의 3차원 속성, 가로 중앙정렬 그리고 hover 기능을 사용해 디자인 했다. 트위치의 서비스, 스트리밍되는 여러 채널들이 나열되어 있는 메인영역에는 각각의 채널들을 표시하는 오브젝트에 마우스를 올릴 때, 나타나는 효과들이 적용되어 ... 대구 AI스쿨CSS웹 프로그래밍Sublime TexthtmlCSS #43_유튜브 페이지 실습 과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권37 유튜브1_210613(1/3) 주제 : html / css 유튜브 페이지 또한 직전에 작업했던 트위치 페이지와 같이 상단영역과 왼쪽 영역이 스크롤에 상관없이 고정되어 있는 것을 알 수 있다. 유튜브 페이지의 경우 y축 스크롤의 범위가 매우 넓기 때문에 왼쪽 영역이 고정되어 항상 메뉴를 확인할 수 있는 이런 구조가 더 적합한것 ... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS #36_네이버 오디오클립 페이지 실습(2) 과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권32 네이버오디오2_210605(2/3) 주제 : html / css 네이버 오디오클립 페이지의 컨텐츠가 담긴 영역을 카피했다. 좌우로 분리되어 있고 컨텐츠의 구조가 유사하여 컨텐츠의 레이아웃 구조를 디자인 하는 속성을 따로 만들어 사용하였다. 각각의 컨텐츠를 구성하는 div태그에 class="audio-section"을 선택자로 ... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS #22_네이버 블로그페이지 실습(2) 강의 : 웹프로그래밍김인권18네이버블로그1_210519(2/3) 웹프로그래밍김인권19네이버블로그1_210519(3/3) - 블로그 상세페이지(챌린지 프로그램) 로그인 영역은 네이버 메인 페이지를 작업한 파일 index.html에서 그 틀을 가져왔다. 기존의 작업에서 이렇게 이미지와 텍스트를 배치할때 <i> 혹은 <img> 태그를 사용하고 정렬 시켰지만 이번에는 background-image속... CSS대구 AI스쿨Sublime TexthtmlCSS #39_트위치 페이지 실습(2) 트위치 페이지에서 눈에 띄는 점은 왼쪽 영역이다. 일반적인 트위치의 컨텐츠가 배치되는 영역과 별개로 스크롤이 적용되어 있어 독립적으로 느껴졌고 트위치라는 플렛폼 사이트의 특성에 잘 맞는 영역이라 생각한다. 추천채널 메뉴는 왼쪽 영역의 핵심적인 부분으로, 사용자들이 소모하는 컨텐츠의 연속성을 제공한다. 내가 보는 방송에 흥미가 떨어지거나 종료되더라도 플렛폼을 벗어나지 않을 수 있는 다른 대안 ... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS
#41_트위치 페이지 실습(4) 트위치 페이지의 메인영역, 공간을 차지하는 콘텐츠 오브젝트들의 대략적인 설계도면 그리고 디자인/ 배치작업을 끝내고 세부적인 부분에 디자인작업을 해주었다. 오브젝트의 3차원 속성, 가로 중앙정렬 그리고 hover 기능을 사용해 디자인 했다. 트위치의 서비스, 스트리밍되는 여러 채널들이 나열되어 있는 메인영역에는 각각의 채널들을 표시하는 오브젝트에 마우스를 올릴 때, 나타나는 효과들이 적용되어 ... 대구 AI스쿨CSS웹 프로그래밍Sublime TexthtmlCSS #43_유튜브 페이지 실습 과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권37 유튜브1_210613(1/3) 주제 : html / css 유튜브 페이지 또한 직전에 작업했던 트위치 페이지와 같이 상단영역과 왼쪽 영역이 스크롤에 상관없이 고정되어 있는 것을 알 수 있다. 유튜브 페이지의 경우 y축 스크롤의 범위가 매우 넓기 때문에 왼쪽 영역이 고정되어 항상 메뉴를 확인할 수 있는 이런 구조가 더 적합한것 ... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS #36_네이버 오디오클립 페이지 실습(2) 과정명 : 대구 AI 스쿨 일반과정 강의 : 웹프로그래밍김인권32 네이버오디오2_210605(2/3) 주제 : html / css 네이버 오디오클립 페이지의 컨텐츠가 담긴 영역을 카피했다. 좌우로 분리되어 있고 컨텐츠의 구조가 유사하여 컨텐츠의 레이아웃 구조를 디자인 하는 속성을 따로 만들어 사용하였다. 각각의 컨텐츠를 구성하는 div태그에 class="audio-section"을 선택자로 ... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS #22_네이버 블로그페이지 실습(2) 강의 : 웹프로그래밍김인권18네이버블로그1_210519(2/3) 웹프로그래밍김인권19네이버블로그1_210519(3/3) - 블로그 상세페이지(챌린지 프로그램) 로그인 영역은 네이버 메인 페이지를 작업한 파일 index.html에서 그 틀을 가져왔다. 기존의 작업에서 이렇게 이미지와 텍스트를 배치할때 <i> 혹은 <img> 태그를 사용하고 정렬 시켰지만 이번에는 background-image속... CSS대구 AI스쿨Sublime TexthtmlCSS #39_트위치 페이지 실습(2) 트위치 페이지에서 눈에 띄는 점은 왼쪽 영역이다. 일반적인 트위치의 컨텐츠가 배치되는 영역과 별개로 스크롤이 적용되어 있어 독립적으로 느껴졌고 트위치라는 플렛폼 사이트의 특성에 잘 맞는 영역이라 생각한다. 추천채널 메뉴는 왼쪽 영역의 핵심적인 부분으로, 사용자들이 소모하는 컨텐츠의 연속성을 제공한다. 내가 보는 방송에 흥미가 떨어지거나 종료되더라도 플렛폼을 벗어나지 않을 수 있는 다른 대안 ... 대구 AI스쿨CSS웹프로그래밍Sublime TexthtmlCSS